<!-- 引导刷新重新加载 -->
<template>
  <div class="guide-main">
    <div class="guide-center">
      <div class="guide-loading">活动太过火爆，请点击刷新重试</div>
      <van-button
        plain
        type="primary"
        :disabled="refreshDisabled"
        @click="onRefresh"
      >
        点击刷新
      </van-button>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  props: {
    maxRefreshCount: {
      type: Number,
      default: 2,
    },
  },
  data() {
    return {
      refreshDisabled: false,
      refreshIntervalId: null,
      countdown: 0,
      refreshCount: 0,
    };
  },
  computed: {
    loadingTxt() {
      return;
    },
  },
  methods: {
    onRefresh() {
      this.refreshDisabled = true;
      this.refreshCount++;

      //刷新次数达到上限
      if (this.refreshCount > this.maxRefreshCount) {
        this.$emit("refresh-exceed");
      } else {
        //倒计时5s
        this.countdown = 5;
        const toast = Toast.loading({
          duration: 0,
          forbidClick: true,
          message: `正在加载中（${this.countdown}s）`,
        });

        this.$emit("onRefresh");

        this.refreshIntervalId = setInterval(() => {
          this.countdown--;
          if (this.countdown) {
            toast.message = `正在加载中（${this.countdown}s）`;
          } else {
            this.refreshDisabled = false;
            clearInterval(this.refreshIntervalId);
            Toast.clear();
          }
        }, 1000);
      }
    },
  },
  beforeDestroy() {
    if (this.refreshIntervalId) {
      clearInterval(this.refreshIntervalId);
    }

    Toast.clear();
  },
};
</script>
<style lang="scss" scoped>
.guide-main {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  .van-button {
    border-radius: 20px;
    height: 0.8rem;
    margin-top: 20px;
  }
}
.guide-loading {
  color: #c9c9c9;
}
</style>
